<template>
  <transition name="fade">
    <div class="input-all" v-if="show">
      <span class="reply-info" v-if="!isRootComment">回复<span class="reply-to">{{replyTo}}</span></span>
      <div class="input-wrapper">      
        <textarea class="gray-bg-input"
                  v-model="inputComment"
                  type="textarea"
                  :rows="3"
                  @focus="inputFocus"
                  placeholder="写下你的评论">
        </textarea>

        
        <!--enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp"-->
        <transition name="fade2">
          
          <div class="btn-control" v-show="controlShow">

            <div class="visit-info-input">
              用户类型(目前只是简单验证)：<label><input type="radio" name="userType" value="visitor" v-model="visitUser.userType">游客</label>
		                   <label><input type="radio" name="userType" value="newUser" v-model="visitUser.userType">新用户</label>
		                   <label><input type="radio" name="userType" value="regularUser" v-model="visitUser.userType">老用户</label>
              <div class="comment-commit-userName" v-show="visitUser.userType != '游客'">
                  头像URL：<input type="text" required v-model="visitUser.imageUrl"/>
                  用户名：<input type="text" required v-model="visitUser.username"/>
              </div>
              <div class="comment-commit-pwd" v-show="visitUser.userType == 'regularUser'">
                  密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" required v-model="visitUser.pwd"/>
              </div>
              <div class="comment-commit-set-pwd" v-show="visitUser.userType == 'newUser'">
                  设定密码：<input type="text" required v-model="visitUser.setPwd"/>
              </div>
              
            </div>
            <button class="cancel" @click="cancel">取消</button>
            <button class="btn" type="success" round @click="commitComment">提交</button>
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    props: {
      //控制整个组件是否显示
      show: {
        type: Boolean,
        required: true,
      },
      //传入input框的默认值
      value: {
        type: String
      },
      //类型，end(文章末尾处), comment(评论里),
      type: {
        type: String,
        // default: 'comment'
      },
      isRootComment: {
         type: Boolean
      },
      //回复人的名字
      replyTo: {
        type: String
      }
    },
    components: {},
    data() {
      return {
        inputComment: '',
        //确定取消按钮是否显示
        controlShow: false,
        
        //提交评论者对象
        visitUser:{
          username:"",  //评论者用户名
          pwd:"",       //老用户密码
          setPwd:"",    //新用户设定的密码
          imageUrl:"",    //头像url
          userType:"visitor"    //用户类型
        }
               
      }
    },
    computed: {},
    methods: {
      /**
       * 点击取消按钮
       */
      cancel() {
        if (this.type === 'end') {
          this.controlShow = false
        }
        this.$emit("cancel")
      },

      /**
       * 提交评论
       */
      commitComment() {       
        /**
         * 触发父组件的提交事件
         */
        if(!this.isRootComment) //这里触发的commit_main中的事件
          this.$emit("confirmReplay", this.visitUser,this.inputComment);
        else {
          this.$emit("confirmMain", this.visitUser,this.inputComment);
        }
      },

      //input活得焦点时调用
      inputFocus() {
        console.log("focus");
        if (this.type === 'end') {
          this.controlShow = true
        }
      },

    },

    watch: {
      //监听value更新，赋值给inputComment
      value: function (newValue, oldValue) {
        this.inputComment = newValue;
      }
    },

    created() {
     
    },

    mounted() {
      if (this.type === 'end') {
        this.controlShow = false
      } else {
        this.controlShow = true
      }
     
    }
  }
</script>

<style scoped lang="scss">

  @import "../../../static/front-vue/scss/index";

  .comment-commit-userName {
    margin-bottom: 1%;
  }

  .visit-info-input label {
    margin-left: 2%;
  }

  .gray-bg-input {
    border: 0px;
    width: 100%;
    height: 100%;
  }
 
  .fade-enter-active, fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .input-all {
    width: 100%;
    height: 100%;
    margin-bottom: 5%;
  }
  .reply-to {
    color: $color-warning;
  }
  .input-wrapper {
    padding: 10px;
    border: 1px solid $text-blueviolet;
    border-radius: 10px;
    height: 80px;
    width: 95%;
    .fade2-enter-active, fade2-leave-active {
      transition: opacity 0.5s;
    }

    .fade2-enter, .fade2-leave-to {
      opacity: 0;
    }
  
    .btn-control {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-top: 10px;     
      /*button样式*/
      button {
        cursor: pointer;
        width: 55px;
        height: 20px;
        line-height: 4px;
        background-color:#6fba26;        
        padding:10px;
        position:relative;
        font-family: 'Open Sans', sans-serif;
        font-size:10px;
        text-decoration:none;
        color:#fff;
        background-image: linear-gradient(bottom, rgb(0,0,255) 0%, rgb(106,90,205) 100%);
        box-shadow: inset 0px 1px 0px #b2f17f, 0px 4px 0px #1E90FF;
        border-radius: 5px;
      }
      button:active {
        top:7px;
        background-image: linear-gradient(bottom, rgb(0,0,255) 100%, rgb(106,90,2051) 0%);
        box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #1E90FF;
        color: #156785;
        text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
        background: rgb(44,160,202);
      }
      button::before {
        background-color:#072239;
        content:"";
        display:block;
        position:absolute;
        width:100%;
        height:100%;
        padding-left:2px;
        padding-right:2px;
        padding-bottom:4px;
        left:-2px;
        top:2px;
        z-index:-1;
        border-radius: 6px;
        box-shadow: 0px 1px 0px #fff;
      }
      button:active::before {
        top:2px
      }
      .cancel {
        margin-right: 16px;
        margin-left: 5%
      }      
     
    }
  }
</style>
